<template>
    <div class="wrapper">
        <mt-header fixed class="no-bg-fff">
            <mt-button icon="back" slot="left" @click="$router.back(-1)"></mt-button>
            <mt-button slot="right" @click="shareToMoment">
                <i class="icon iconfont icon-tubiao212"></i>
            </mt-button>
        </mt-header>
        <div class="banner" id="html2canvas">
            <img src="http://47.75.99.213/app/cdn/yao-bg.png">
            <div class="inner">
                <div class="title">
                    <span>您的邀请码为</span>
                    <span>{{userInfo.qrCode}}</span>
                </div>
                <div class="btn tag-read" @click="copyCode()">复制我的邀请码</div>
                <div class="codeBox" id="qrcode" ref="qrcode">
                </div>
                <div class="text" @click="saveImg">点击即可保存个人专属二维码</div>
            </div>
        </div>
        <div class="ruler" @click="isShowRuler=true">
            <span>活动<br/>规则</span>
            <i slot="icon" class="icon iconfont icon-jiantou-xia"></i>
        </div>
        <div class="rulerBox" v-show="isShowRuler">
            <div class="inner">
                <div class="title">邀请好友奖励规则</div>
                <ul class="text">
                    <li>1）用户点击“邀请好友”出来邀请页面，里面包含有：邀请码、二维码、活动信息。每邀请一位好友成功注册APP可获得代币奖励。</li>
                    <li>2）邀请流程：生成海报（含有二维码）—>好友扫描二维码，并填写手机号领取奖励—>下载APP奖励分发。</li>
                    <li>3）奖励细则：邀请一位好友完成APP注册，邀请人即可获得10个DLB奖励；（预留:1000万个DLB）</li>
                    <li>4）奖励细则：邀请一位好友完成APP注册，邀请人即可获得10个DLB奖励；（预留:1000万个DLB）</li>
                    <li>5）奖励细则：邀请一位好友完成APP注册，邀请人即可获得10个DLB奖励；（预留:1000万个DLB）</li>
                </ul>
                <div class="btn" @click="isShowRuler=false">我知道了</div>
            </div>
        </div>
    </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import Clipboard from 'clipboard';
import { Toast } from 'mint-ui';
import { mapGetters } from 'vuex'
export default {
    data: function () {
        return {
            isShowRuler:false,
        }
    },
    computed: {
        ...mapGetters([
            'userInfo'
        ])
    },
    mounted(){
        this.qrcode()
    },
    methods: {
        copyCode(){
            var shareCode = this.userInfo.qrCode;
            var clipboard = new Clipboard('.tag-read', {
                text: function() {
                    return shareCode;
                }
            });
            clipboard.on('success', e => {
                console.log('复制文本为：'+shareCode);
                Toast({
                    message: '复制成功',
                    iconClass: 'icon iconfont icon-ic_check'
                });
                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                // 不支持复制
                Toast({
                    message: '不支持自动复制',
                    iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                });
                // 释放内存
                clipboard.destroy()
            })
        },
        shareToMoment(){
            console.log('分享海报到朋友圈，扫描海报二维码获取专属邀请注册链接');
        },
        qrcode () {
            let qrcode = new QRCode('qrcode',{
                width: 120, // 设置宽度，单位像素
                height: 120, // 设置高度，单位像素
                text: `https://www.baidu.com?sharecode=${this.userInfo.qrCode}`   // 设置二维码内容或跳转地址
            })
        },
        saveImg(){
            this.isShowImg = true;
            var shareContent = document.getElementById("html2canvas");
            html2canvas(shareContent,{
                onrendered: function(canvas){
                    console.log(canvas.toDataURL());
                    Toast({
                        message: '已保存到相册',
                        iconClass: 'icon iconfont icon-ic_check'
                    });
                }
            })
        }
    },
}
</script>


<style lang="stylus" scoped>
.wrapper{
    position:relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .banner{
        position: relative;
        .inner{
            position: absolute;
            top: 30%;
            width: 60%;
            left: 20%;
            text-align: center;
            .title { 
                width: 100%;
                color:#333333;
                span{
                    display:block;
                    &:last-child{
                        font-size:23px;
                        color:#0055A4;
                        margin-top:10px;
                        font-weight:bold;
                    }
                }
            }
            .btn{
                width:auto;
                height:24px;
                line-height:24px;
                background:rgba(0,85,164,1);
                border-radius:12px;
                font-size:12px;
                color:#fff;
                margin: 0 auto;
                margin-top: 5%;
                display: inline-block;
                padding: 0 18px;
                
            }
            .codeBox{
                width:120px;
                height:120px;
                margin: 0 auto;
                margin-top:7%;
            }
            .text{
                font-size:12px;
                color:#999;
                margin-top:5%;
            }
        }
    }
    .ruler{
        width:49px;
        height:60px;
        position:absolute;
        right: 6%;
        top: 10%;
        background:url(http://47.75.99.213/app/cdn/ruler-bg.png) no-repeat 0 0;
        background-size:100% 100%;
        color:#0055A4;
        text-align: center;
        span{
            display block;
            width:100%;
            margin-top: 3px;
        }
    }
    .rulerBox{
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        background:rgba(0,0,0,.5);
        z-index: 99;
        .inner{
            position:absolute;
            top:50%;
            left:10%;
            width:80%;
            transform:translateY(-50%);
            background-color:#fff;
            border-radius:5px;
            padding:0 22px;
            .title{
                font-size:17px;
                font-weight:bold;
                color:#0055A4;
                padding-bottom:15px;
                border-bottom:1px solid #CCCCCC;
                margin-top:20px;
                text-align:center;
            }
            .text{
                margin-top:20px;
                padding-bottom:25px;
                color:#999999;
                line-height:25px;
                border-bottom:1px solid #CCCCCC;
            }
            .btn{
                margin: 0 auto;
                margin-top:25px;
                margin-bottom:30px;
                width:200px;
                height:44px;
                line-height:44px;
                color:#fff;
                text-align:center;
                background:#0055A4;
                border-radius:22px;
            }
        }
    }
    .shareImg{
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        background:rgba(0,0,0,.5);
        z-index: 99;
    }
}  
</style>
